<template>
    <div class="div">
        <div class="all" v-if="orderList.length !== 0">
            <div class="order-list">
                <div class="item" v-for="item in orderList" :key="item.order_id">
                    <div class="order-date">
                        <span>{{ item.create_time }}</span>
                        <i>{{ item.state_text }}</i>
                    </div>
                    <div class="order-count">
                        <img :src="item.goods[0].goods_image" alt="">
                        <span class="good-title">{{ item.goods[0].goods_name }}</span>
                        <div class="good-price">
                            <p>￥ {{ item.goods[0].goods_price }}</p>
                            <p>x {{ item.goods[0].total_num }}</p>
                        </div>
                    </div>
                    <div class="order-total">
                        <p>共<span> {{ item.goods[0].total_num }} </span>件商品，总金额<span>￥{{ item.goods.total_price }}</span></p>
                        <button>申请取消</button>
                    </div>
                </div>

            </div>
        </div>
        <div class="unpaid" v-else>
            <div class="unpaid-order">没找到订单？试试
            <a href="">查看全部</a>
            或<a href="">切换账号</a></div>
        </div>
    </div>

</template>

<script>
export default {
  props: {
    orderList: Array

  },
  data () {
    return {

    }
  },
  created () {

  }
}
</script>

<style>
.all{
    width: 100%;
    height: 500px;
    background-color: rgb(247, 247, 247);
}
.order-list{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-content: center;
}
.item{
    width: 95%;
    height: 200px;
    margin: 10px 10px 0px 10px;
    padding: 15px 15px;
    background-color: white;
}
.item i{
    font-style: normal;
    color: red;
}
.item .order-date{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.order-count{
    display: flex;
    flex-direction:row;
    justify-content: space-around;
    margin-top: 20px;
}
.order-count img{
    width: 80px;
    height: 80px;
}
.order-count .good-title{
    /* display: inline-block; */
    width: 160px;
    height: 43px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 5px;
    font-size: 16px;
}
.order-count .good-price,
.order-total{
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: flex-end;
    font-size: 16px;
}
.order-total button{
    display: inline-block;
    margin-top: 5px;
    font-size: 14px;
    width: 80px;
    height: 25px;
    background-color: white;
    border: 1px solid rgb(194, 190, 190);
    border-radius: 3px;
}
.unpaid{
  background-color: rgb(247, 247, 247);
}
.unpaid-order{
  width: 250px;
  margin:0 auto;
  padding: 15px 0;
  font-size: 14px;

}
</style>
